<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生表</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-table .danger-row {
            background: #f0f7f8;
        }
        .el-header{
            text-align: center;
            font-size: 35px;
            font-weight: 500;
        }
    </style>
</head>
<body>
<div id="app">
    <el-header>
        <span>学生课程成绩查询(学生端)</span>
    </el-header>
    <el-form :inline="true" :model="searchform" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="searchform.schoolYear" clearable placeholder="学年">
                <el-option
                        v-for="item in schoolyears"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-select v-model="searchform.subjectName" clearable placeholder="课程名称">
                <el-option
                        v-for="item in courses"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <!-- 搜索按钮 -->
        <el-form-item>
            <el-button type="primary" @click="searchinfo"><i class="el-icon-search"></i></el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                prop="schoolYear"
                label="学年"
                align="center"
                width="200">
        </el-table-column>
        <el-table-column
                prop="studentId"
                label="学号"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="studentName"
                label="姓名"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="subjectName"
                label="课程名称"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="courseMark"
                label="成绩"
                align="center"
                width="180">
        </el-table-column>

        <el-table-column
                prop="addTime"
                align="center"
                label="录入时间">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="pageSize"
                style="margin-top:20px"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                currentPage: 1,
                pageSize:10,
                total:0,
                multipleSelection: [],
                // 搜索表单返回值
                searchform: {
                    subjectName: '',
                    schoolYear: ''
                },
                tableData: [],
                schoolyears: [{
                    value: '2019-2020',
                    label: '2019-2020'
                },{
                    value: '2020-2021',
                    label: '2020-2021'
                }, {
                    value: '2021-2022',
                    label: '2021-2022'
                }, {
                    value: '2022-2023',
                    label: '2022-2023'
                }, {
                    value: '2023-2024',
                    label: '2023-2024'
                }],

                courses:[{
                    value: '语文',
                    label: '语文'
                },{
                    value: '数学',
                    label: '数学'
                }, {
                    value: '英语',
                    label: '英语'
                }],
            }
        },
        mounted(){
            this.tableInit();
        },
        methods: {
            tableInit(){
                axios({
                    method:'get',
                    url:"http://localhost:8080/student?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    headers:{
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(result=>{
                        if(result.data.code==1){
                          this.tableData=result.data.data.rows;
                          this.total=result.data.data.totalCount;
                        }else if(result.data.code==0 && result.data.msg=='NOTLOGIN'){
                          location.href="Login.html";
                        }else if(result.data.code==0){
                          this.$message.error=result.data.msg;
                        }
                    })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 == 0) {
                return 'warning-row';
                } else if (rowIndex % 4 == 2) {
                return 'success-row';
                }else  return '';
            },

            //处理分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.tableInit();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.tableInit();
            },
            //提交搜索表单
            searchinfo() {
                axios({
                    method:'post',
                    url:"http://localhost:8080/student/selectByCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.searchform,
                    headers:{
                        'Content-Type':"application/json;charset=UTF-8",
                        'Authorization':localStorage.getItem('token')
                    }
                }).then(res=>{
                        if(res.data.code==1){
                            this.totalCount=res.data.data.totalCount;
                            this.tableData=res.data.data.rows;
                        }
                    })
            }
        }
    })
</script>
</body>
</html>